<template >
  <el-row >
    <el-col :span="24" >
      <h5 class="mb-2">实例详情</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="1">
          <el-icon-data-line></el-icon-data-line>
          <router-link to="/IoT/" class="no-style"><el-menu-item index="1-1">第三方系统</el-menu-item></router-link>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><location /></el-icon>
            <span>设备管理</span>
          </template>
          <el-menu-item-group title="">
            <router-link to="/IoT/product" class="no-style"><el-menu-item index="2-1">产品</el-menu-item></router-link>
            <router-link to="/IoT/device" class="no-style"><el-menu-item index="2-2">设备</el-menu-item></router-link>
            <el-menu-item index="2-3">分组</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="2-4">
            <template #title>设备模拟</template>
            <el-menu-item index="2-4-1">开发中</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="3">
          <el-icon><icon-menu /></el-icon>
          <span>消息转发</span>
        </el-menu-item>
        <el-menu-item index="4" disabled>
          <el-icon><document /></el-icon>
          <span>云产品流转</span>
        </el-menu-item>
        <el-menu-item index="5">
          <el-icon><setting /></el-icon>
          <span>服务端订阅</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
    export default {
        name:"Asider"
    }
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    width: 15%;
  }
     .no-style {
     color: inherit;
     text-decoration: none;
     background-color: transparent;
     /* 添加其他需要清除的样式 */
   }
</style>